import styled from "@emotion/styled"
import { PageHeader } from "@/pages/AccountPage/components/PageHeader"
import { Card } from "@/pages/AccountPage/components/Card"
import { useLocation, NavLink } from "react-router-dom"
import { useCallback, useEffect, useMemo, useRef } from "react"
import EmailHint from "@/pages/AccountPage/components/Models/EmailHint"
import { useModalSlideUp } from "@/features/useModal"
import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import { Repository } from "@/atoms/api_repositories"

import { ImageComponent } from "@/components/base/Image"
import { resolveAssetImage } from "@/utils/common"

import { useMainPage } from "@/features/business/AccountPage/useMainPage"

const Subtract = styled(ImageComponent("pages/AccountPage/subtract.webp"))`
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
`

const AccountRoot = styled.div`
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex: 1;
`

const AccountRootBackgroundImage = styled(ImageComponent("pages/AccountPage/rect_angle.webp"))`
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
`

const PageBody = styled.div`
    flex: 1;
    padding: 0 12rem;
    position: relative;
`
const AvatarBox = styled.div`
    width: 80rem;
    height: 80rem;
    border-radius: 50%;
    margin: 0 auto;
    padding: 4rem;
    position: relative;
`
const Avatar = styled.img`
    margin-top: 8rem;
    width: 100%;
    height: 100%;
    border-radius: 50%;
`
const EditIcon = styled.img`
    width: 16rem;
    height: 16rem;
    position: absolute;
    right: 6rem;
    top: 66rem;
    z-index: 3;
`

const Content = styled.div`
    width: 100%;
    height: 500rem;
    display: flex;
    flex-direction: column;
    padding-top: 40rem;
    padding-left: 12rem;
    padding-right: 12rem;
    margin-top: -22rem;
    position: relative;
    border-radius: 8rem;
    overflow: hidden;
`

const MainPage = () => {
    const { userInfo, kycInfo, hasEmail, avatarUrl, loading, error } = useMainPage()

    const { open: openModal, close: closeModal } = useModalSlideUp("account-page")

    const handleOpenModal = useCallback(() => {
        openModal(<EmailHint />, {
            closeOnClickMask: false,
            closeOnEscape: false,
        })
    }, [openModal])

    // bug？？？？
    // useEffect(() => {
    //     if (!hasEmail) {
    //         handleOpenModal()
    //     }
    // }, [hasEmail])

    return (
        <AccountRoot>
            <AccountRootBackgroundImage />
            <PageHeader
                title="Account"
                backPath="/my"
            />
            <PageBody>
                <AvatarBox>
                    {/* <EditIcon src={resolveAssetImage("pages/AccountPage/edit.webp")}></EditIcon> */}
                    {/* <NavLink to="/s-account/avatar"> */}
                    <Avatar
                        src={avatarUrl || resolveAssetImage("pages/AccountPage/my_avatar.webp")}
                    ></Avatar>
                    {/* </NavLink> */}
                </AvatarBox>
                <Content>
                    <Subtract />
                    {userInfo && <Card userInfo={userInfo} />}
                </Content>
            </PageBody>
            <ModalSlideUp familyName="account-page" />
        </AccountRoot>
    )
}

export default MainPage
